<template>
  <view class="order-wrap">
    <view
      :style="{ background: `url(/static/image/bg3.png) top/100% no-repeat` }"
      class="top-bg"
    >
      <view class="tab-content">
        <u-tabs
          ref="tabs"
          :list="list"
          active-color="#fff"
          inactive-color="#fff"
          line-color="#fff"
          font-size="50"
          :current="current"
          :activeStyle="activeStyle"
        ></u-tabs>
      </view>
      <view class="middle-panel">
        <view
          :style="{
            background: `url(/static/image/bg4.png) top/100% no-repeat`,
          }"
          class="panel-top-bg"
        >
          <view class="bottom-content">
            <view class="left-txt2">
              <view class="sale-txt">总销售金额(元)</view>
              <view class="total-money">1280.00</view>
            </view>
            <view class="right-txt2">
              <view class="sale-txt">退款金额</view>
              <view class="back-money">37.50</view>
            </view>
          </view>
        </view>
        <view class="info-content">
          <view class="info-item">
            <view class="info-txt">
              <view class="num">47</view>
              <view class="des">销售总订单(笔)</view>
            </view>
            <view class="info-txt">
              <view class="num">47</view>
              <view class="des">未结算佣金(元)</view>
            </view>
            <view class="info-txt2">
              <view class="num">47</view>
              <view class="des">已结算佣金(元)</view>
            </view>
          </view>
          <view class="info-item">
            <view class="info-txt">
              <view class="num">47</view>
              <view class="des">有效销售额(元)</view>
            </view>
            <view class="info-txt">
              <view class="num">47</view>
              <view class="des">有效订单(笔)</view>
            </view>
            <view class="info-txt2">
              <view class="num">47</view>
              <view class="des">退款订单(笔)</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="order-title">
      <view class="txt">订单明细</view>
      <view>
        <view class="video-icon">
          <image src="/static/image/img13.png" class="arrow-img"></image>
        </view>
      </view>
    </view>
    <view class="btn-list">
      <view class="btn-item active">全部</view>
      <view class="btn-item">待入账</view>
      <view class="btn-item">已入账</view>
      <view class="btn-item">无效单</view>
    </view>
    <view class="order-list">
      <view class="order-item">
        <view class="top-box">
          <view class="order-num">订单编号：2025102500012061</view>
          <view class="order-status">待发货</view>
        </view>
        <view class="line"></view>
        <view class="middle-box">
          <view class="left">
            <view class="avatar-box">
              <u-avatar
                src="https://img2.baidu.com/it/u=2934047998,2737647907&fm=253&app=138&f=JPEG?w=800&h=1518"
              ></u-avatar>
            </view>
            <view class="user-name">JOJO Chow</view>
          </view>
          <view class="right"> 2025-10-25 10:26:28下单 </view>
        </view>
        <view class="shop-area">
          <view class="shop-img">
            <image
              src="https://img2.baidu.com/it/u=2934047998,2737647907&fm=253&app=138&f=JPEG?w=800&h=1518"
            ></image>
          </view>
          <view class="info-ara">
            <view class="shop-name">卡农梦塞干红葡萄酒Chateau Canon...</view>
            <view class="order-info">
              <view class="info-left">
                <view class="info">规格：750ml</view>
                <view class="info">售价：￥258.00</view>
                <view class="info">佣金：￥27.50</view>
              </view>
              <view class="info-right">x1</view>
            </view>
          </view>
        </view>
        <view class="line"></view>
        <view class="bottom-area">
          <view class="money-area">
            <text class="txt1">佣金收益：<text class="txt2">¥108</text></text>
          </view>
          <view class="order-status">待入账</view>
        </view>
      </view>
      <view class="order-item">
        <view class="top-box">
          <view class="order-num">订单编号：2025102500012061</view>
          <view class="order-status">待发货</view>
        </view>
        <view class="line"></view>
        <view class="middle-box">
          <view class="left">
            <view class="avatar-box">
              <u-avatar
                src="https://img2.baidu.com/it/u=2934047998,2737647907&fm=253&app=138&f=JPEG?w=800&h=1518"
              ></u-avatar>
            </view>
            <view class="user-name">JOJO Chow</view>
          </view>
          <view class="right"> 2025-10-25 10:26:28下单 </view>
        </view>
        <view class="shop-area">
          <view class="shop-img">
            <image
              src="https://img2.baidu.com/it/u=2934047998,2737647907&fm=253&app=138&f=JPEG?w=800&h=1518"
            ></image>
          </view>
          <view class="info-ara">
            <view class="shop-name">卡农梦塞干红葡萄酒Chateau Canon...</view>
            <view class="order-info">
              <view class="info-left">
                <view class="info">规格：750ml</view>
                <view class="info">售价：￥258.00</view>
                <view class="info">佣金：￥27.50</view>
              </view>
              <view class="info-right">x1</view>
            </view>
          </view>
        </view>
        <view class="line"></view>
        <view class="bottom-area">
          <view class="money-area">
            <text class="txt1">佣金收益：<text class="txt2">¥108</text></text>
          </view>
          <view class="order-status">待入账</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: "今日",
        },
        {
          name: "本周",
        },
        {
          name: "本月",
        },
      ],
      current: 0,
      activeStyle: {
        color: "#fff",
      },
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
  },
};
</script>
<style>
.top-bg {
}
::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: space-between;
}
::v-deep .u-tabs__wrapper__nav__item {
  flex: 1 1 0% !important;
}
::v-deep .u-tabs__wrapper__nav__item__text {
  color: #fff;
}
::v-deep .u-tabs__wrapper__nav__item__text.data-v-0de61367 {
  font-size: 28rpx;
  color: #fff !important;
}
.tab-content {
  height: 100rpx;
  line-height: 100rpx;
}
.middle-panel {
  margin: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  height: 520rpx;
}
.panel-top-bg {
  height: 180rpx;
}
.bottom-content {
  display: flex;
  justify-content: space-between;
  width: 674rpx;
  height: 70rpx;
}
.left-txt2,
.right-txt2 {
  flex: 1;
  text-align: center;
  margin: auto;
  margin-top: 20rpx;
}
.sale-txt {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
}
.total-money {
  font-weight: bold;
  font-size: 64rpx;
  color: #d40000;
}
.back-money {
  font-family: D-DIN Condensed;
  font-weight: bold;
  font-size: 64rpx;
  color: #333333;
}
.info-content {
  /* margin-top: 150rpx; */
  margin: 10rpx;
  height: 320rpx;
  background: #fff6f6;
  border-radius: 20rpx;
}
.info-item {
  display: flex;
  justify-content: space-between;
  height: 160rpx;
  padding: 0 40rpx;
}
.info-txt,
.info-txt2 {
  flex: 1;
  margin: auto 0;
}
.info-txt {
  border-right: 1rpx solid #ccc;
  margin-right: 30rpx;
}
.num {
  font-weight: bold;
  font-size: 40rpx;
  color: #333333;
}
.des {
  font-weight: 500;
  font-size: 24rpx;
  color: #666666;
}
.order-title {
  height: 100rpx;
  margin: 0 20rpx;
  display: flex;
  justify-content: space-between;
  line-height: 100rpx;
  align-items: center;
}
.txt {
  font-family: PingFang SC;
  font-weight: 800;
  font-size: 35rpx;
  color: #333333;
}
.video-icon {
  width: 62rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: #e4e2e2;
  border-radius: 40rpx;
  justify-content: space-around;
  position: relative;
}
.arrow-icon {
  margin: auto;
}
.btn-item {
  width: 170rpx;
  height: 64rpx;
  background: #ffffff;
  border-radius: 10rpx;
  text-align: center;
  line-height: 64rpx;
  box-sizing: border-box;
  color: #666;
}
.btn-list {
  display: flex;
  justify-content: space-between;
  margin: 0 20rpx;
}
.active {
  border: 1rpx solid #d40000;
  color: #d40000;
  background: #ffeded;
}
.order-item {
  /* min-height: 480rpx; */
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx;
}
.line {
  width: 674rpx;
  height: 1rpx;
  background: #e6e6e6;
  margin: 0 auto;
}
.top-box {
  height: 90rpx;
  line-height: 90rpx;
  display: flex;
  justify-content: space-between;
  margin: 0 20rpx;
}
.order-num {
  font-weight: 500;
  font-size: 26rpx;
  color: #666666;
}
.order-status {
  font-weight: 500;
  font-size: 26rpx;
  color: #d40000;
}
.arrow-img {
  width: 36rpx;
  height: 36rpx;
}
.avatar-box {
  margin-right: 20rpx;
}
.middle-box {
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  line-height: 100rpx;
  margin: 0 20rpx;
}
.avatar-box {
  margin-top: 20rpx;
}
.middle-box .left {
  display: flex;
  justify-content: start;
}
.middle-box .right {
  font-size: 24rpx;
  color: #999999;
}
.user-name {
  font-size: 24rpx;
  color: #333;
}
.shop-area {
  display: flex;
  justify-content: start;
  margin: 30rpx 20rpx 20rpx;
}
.shop-img image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
}
.shop-img {
  margin-right: 20rpx;
}
.order-info {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}
.shop-name {
  width: 500rpx; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  font-size: 28rpx;
  color: #333;
}
.info {
  color: #999;
  font-size: 24rpx;
  line-height: 36rpx;
}
.info-right {
  color: #999;
  font-size: 24rpx;
  align-items: center;
  display: flex;
}
.bottom-area {
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  line-height: 100rpx;
  margin: 0 20rpx;
}
.money-area .txt1{
  font-size: 24rpx;
  color: #333;
}
.money-area .txt2{
  font-size: 24rpx;
  color: #D40000;
  font-weight: 700;
}
.order-status {
  font-size: 26rpx;
  color: #D40000;
}
.order-list {
  padding-bottom: 300rpx;
}
</style>